
<template>
    <div  class="app-container">
        <div class="header"> 修改订单 </div>
        <div class="form-container">
          <div class="form">
            <el-form :model="orderForm" status-icon :rules="rules" ref="orderForm" label-width="100px">
                <el-form-item label="名称" prop="student.id" >
                        <el-select v-model="orderForm.student.id" 
                          @change="handleStuChange"
                          @clear="handleStuClear"
                          clearable filterable placeholder="请选择开通客户">
                          <el-option
                            v-for="item in students"
                            :key="item.id"
                            :label="item.username"
                            :disabled="item.isEnable == 0"
                            :value="item.id">
                            <span style="float: left">{{ 'ID: ' + item.id }}</span>
                            <span style="float: right;  font-size: 14px">{{ item.username }}</span>
                          </el-option>
                        </el-select>
                </el-form-item>

                <el-form-item label="产品类型" prop="product.id">
                  <el-select v-model="orderForm.product.id" clearable filterable placeholder="请选择产品类型">
                    <el-option v-for="item in products" :key="item.id" :label="item.name" :value="item.id"/>
                  </el-select>
                </el-form-item>

                <el-form-item label="客户类型" prop="student.level.name">
                    <el-col :span="18">
                      <el-input placeholder="请选择客户" v-model="orderForm.student.level.name" :disabled="true"/>
                    </el-col>
              
                </el-form-item>
                  
                <el-form-item label="创建人" prop="admin.id">
                  <el-select :disabled="true" v-model="orderForm.admin.id"  clearable filterable placeholder="请选择创建人">
                    <el-option v-for="item in admins" :key="item.id" :disabled="item.isEnable == 0" :label="item.username" :value="item.id"/>
                  </el-select>
                </el-form-item>

                <el-form-item label="缴费金额" prop="totalMoney">
                    <el-col :span="18">
                      <el-input placeholder="请输人时长" v-model="orderForm.totalMoney" :disabled="true"/>
                    </el-col>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('orderForm')">立即创建</el-button>
                    <el-button @click="resetForm('orderForm')">重置</el-button>
                </el-form-item>
            </el-form>
          </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import rules  from "@/data/orderRules"

  export default {
    data() {
      return {
        students:[],
        admins:[],
        products:[],
        orderForm: {
          student:{
            id:'',
            level:{
              name:'',
              price: ''
            }
          },
          product:{
            id:""
          },
          admin:{
            id: ''
          },
          updateTime:'',
          totalMoney:''
        },
        rules,
        editId : this.$route.query.id || 1
      };
    },
    computed: {
    ...mapGetters(["id"]),
    },
    methods: {
      async getData() {  
        console.log(this.id);
        // 从 store 获取保存的 管理员 id 赋值到默认选中的管理员
        this.orderForm.admin.id = parseInt(this.id)
        // 获取产品列表
        let res = await this.$store.dispatch('dataBase/getProductList') 
        if(res.code == 1) {
            this.products = res.data
        }else{
            this.$message({ showClose: true,message: res.msg, type: 'error'})
        }
        // 获取客户列表 参数username=&speciality=&level=&status=
        res = await this.$store.dispatch('student/getList',{username:'',speciality:'',level:'',status:''}) 
        if(res.code == 1) {
            this.students = res.data
        }else{
            this.$message({ showClose: true,message: res.msg, type: 'error'})
        }
        // 获取管理员列表
        res = await this.$store.dispatch('admin/getList',{username:'',sex:'',roleId:'',status:''}) 
        if(res.code == 1) {
            this.admins = res.data
        }else{
            this.$message({ showClose: true,message: res.msg, type: 'error'})
        }
      },
      async getOrderInfo() {
        console.log('获取编辑的订单id '+this.editId);
        const res = await this.$store.dispatch('order/getInfo',this.editId) 
        if(res.code == 0) {
          this.$message({ showClose: true, message: res.msg, type: 'error'})
        }else{
            this.orderForm  = res.data
        }
      },
      submitForm(formName) {
        // 赋值要提交修改的时间
        const now = new Date()
        this.orderForm.updateTime = now

        console.log(this.orderForm);
        // 表单验证
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            console.log('提交');
            // 提交
            const res = await this.$store.dispatch('order/editOrder',this.orderForm)
            if(res.code == 1) {
                this.$message({ showClose: true, message: res.msg, type: 'success' })
                // 恢复初始状态
                this.$refs[formName].resetFields();
            }else{
               this.$message({ showClose: true, message: res.msg, type: 'error' })
            }
          } else {
            this.$message({ showClose: true, message: '请输入填写合法的表单数据', type: 'error' })
          }
        });
      },
      handleStuChange(id){
        console.log('改变了');
        // 恢复默认值
        this.handleStuClear();
        let student = this.students.find((item)=>{//这里的userList就是上面遍历的数据源
            return item.id === id;//筛选出匹配数据
          });

        if(student != null) {
            // 获取客户类型
            const LevelName = student.level.name;
            this.orderForm.student.level.name = LevelName

        }
      },
      handleStuClear() {
        this.orderForm.student.level.name= ''
      },
     async resetForm(formName) {
     
        this.$refs[formName].resetFields();
           await this.getOrderInfo();
           this.orderForm.admin.id = parseInt(this.id)
           this.orderForm.student.id = ''
           this.orderForm.product.id = ''
           
        this.$message({ showClose: true,  message: '重置成功',type: 'success'})
      }
    },
    mounted() {
      this.getData();
      this.getOrderInfo();
    }
  }
</script>


<style lang="scss" scoped>
    .app-container{
         position: absolute;
         left: 0;
         right: 0;
        padding: 30px;
        background-size: cover;
        height: 100%;
        background-attachment: fixed;
        background-image: url(https://cdn.jsdelivr.net/npm/kang-static/home/assets/bg/027.jpg);
        background-repeat: no-repeat;
            
        .header{
            text-align: center;
            z-index: -999;
            margin-bottom: 20px;
            font-size: 20px;
            color: #606266;
            font-weight: 700;
        }
        .form-container{
            display: flex;
            justify-content: center;
            align-items:center;
            padding-top: 30px;
            width: 500px;
            margin: 0 auto;
            border-radius: 5px;
            background: hsla(0,0%,100%,.5);
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        }
        .form{
            width: 400px;
        }
 
    }
</style>